import React,{useEffect,useState} from 'react'
import { useNavigate } from "react-router-dom";
import { DetailRightTab } from "../api/index";

type Props = {}

const DetailTab = (props: Props) => {
    const navigate = useNavigate();
  const [list, setList] = useState([]);
    useEffect(() => {
        getData();
      }, []);
      const getData = () => {
        DetailRightTab().then((res: any) => {
          setList(res.data.data);
        });
      };
      console.log(list);
      
  return (
    <div>
        {
            list && list.map((item:any,index:number)=>{
                return <li key={index} onClick={()=>navigate("/home/HomeRightTabDetail/"+item.id, { state: item })}>
                    <span>{item.label}</span>
                    <span>Total {item.articleCount} count</span>
                </li>
            })
        }
    </div>
  )
}

export default DetailTab